import React, { Component } from 'react'
import { fetchData } from "../../../components/AjaxConsumer";
import { Modal, Button, Form, Transfer } from 'antd';
import { ModalForm } from '../../../components'

// 给业务用户分配工作区
export default class AssignBuzUserWorkArea extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            mockData: [],
            targetKeys: [],
            loginName: '',
        };
        this.showModal = this.showModal.bind(this)
        this.handleOk = this.handleOk.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
    }

    //显示弹框
    showModal() {
        this.setState({
            visible: true,
        });
    }

    //提供调用初始化方法
    initModal = (loginName) => {
        console.log("loginName:" + loginName);
        this.setState({loginName: loginName});
        this.getData(loginName);
        this.showModal();
    }

    //穿梭框数据初始化-所有的数据
    getData = (loginName) => {
        let options = {
            url: '/base/workarea/r/factory/wh',//请求地址
            type: 'get',//请求方式
            condition: {},//请求条件
            callback: this.setMockData
        };
        fetchData(this, options, (resData) => {
            this.setState({
                resData: resData
            });
            const mockData = [];
            let rtData = resData.data;
            for (let i = 0; i < rtData.length; i++) {
                const data = {
                    key: rtData[i].workareaCode,
                    title: '('+rtData[i].factoryName+')'+rtData[i].workareaName
                };
                mockData.push(data);
            }
            this.setState({mockData});
        });

        // 用户的数据
        console.log("this.state.loginName=" + loginName);
        let options1 = {
            url: '/base/auth/data/' + loginName + '/buz/wareas',//请求地址
            type: 'post',//请求方式
            condition: {},//请求条件
            callback: this.setTargetKeys
        };
        fetchData(this, options1, (resData) => {
            this.setState({
                resData: resData
            });
            const targetKeys = [];
            let rtData = resData.data;
            for (let i = 0; i < rtData.length; i++) {
                targetKeys.push(rtData[i]);
            }
            this.setState({targetKeys});
        });
    }


    //设置targetKeys
    setTargetKeys = () => {

    }

    //修改报表用户工厂类型
    handleOk() {
        this.setState({loading: true});

        var usrWorkAreaList = new Array();
        for (var i = 0; i < this.state.targetKeys.length; i++) {
            var tmp = {};
            tmp.loginName = this.state.loginName;
            tmp.workareaCode = this.state.targetKeys[i];
            usrWorkAreaList.push(tmp);
        }
        console.log('业务用户工作区===',usrWorkAreaList);
        let options = {
            url: '/base/auth/data/buz/u',//请求地址
            type: 'post',//请求方式
            condition: JSON.stringify(usrWorkAreaList),//请求条件
            contentType: 'application/json; charset=utf-8'
        };
        fetchData(this, options,this.callback);
    }

    callback = () => {

        console.log("i am comming")
        this.setState({loading: false, visible: false});
    }

    handleCancel() {
        this.setState({visible: false});
    }

    //点击移动目标时，输出详情
    handleChange = (targetKeys, direction, moveKeys) => {
        console.log(targetKeys, direction, moveKeys);
        this.setState({targetKeys});
    }

    renderItem = (item) => {
        const customLabel = (
            <span className="custom-item">
                {/*{item.key} - */}{item.title}
            </span>
        );

        return {
            label: customLabel,  // for displayed item
            value: item.title,   // for title and filter matching
        };
    }

    render() {
        let formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
        return (
                <Modal
                    style={{top:'20px'}}
                    visible={this.state.visible}
                    title="工作区分配"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={formAlerSize=='large'?'850px':'400px'}
                    footer={[
                            <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
                            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
                          ]}
                >
                    <div style={{float:'left',width:'80px', height:'1px'}}></div>
                    {/*手动居中控制*/}
                    <Transfer
                        showSearch
                        dataSource={this.state.mockData}
                        listStyle={{
                                      width: 300,
                                      height: 300
                                    }}
                        targetKeys={this.state.targetKeys}
                        onChange={this.handleChange}
                        render={this.renderItem}
                    />
                </Modal>
        );
    }
}
